<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul,
        li {
            list-style: none;
        }

        li {
            width: 200px;
            height: 100px;
            background: blue;
            margin: 10px;
        }

        .box {
            margin: 100px;
            border: 1px solid green;
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>
    <ul>
        <!-- 如果想要拖拽,必须添加允许拖拽的属性 -->
        <li draggable="true">01</li>
        <li draggable="true">02</li>
        <li draggable="true">03</li>
    </ul>

    <!-- 目标元素 -->
    <div class="box"></div>

    <script>
        //获取元素
        var aLi = document.querySelectorAll('li');
        var oBox = document.querySelector('.box');
        //拖拽源绑定事件
        for (let i = 0; i < aLi.length; i++) {
            //开始拖拽
            aLi[i].ondragstart = function () {
                this.style.background = "lightgreen";
            }

            //拖拽中  ,持续触发
            var n = 0;
            aLi[i].ondrag = function () {
                //console.log(n);
                n++;
            }

            //拖拽结束
            aLi[i].ondragend = function () {
                this.style.background = "orange";
            }
        }

        //给拖拽目的地绑定事件
        //进入目的地
        oBox.ondragenter = function () {
            this.style.background = "lightpink";
        }


        //在目的地上方
        var m = 0;
        oBox.ondragover = function (ev) {
            console.log(m);
            m++;
            ev.preventDefault();
        }


        //考虑一下，我想要在目的地上方就松开鼠标
        // ondrop 想要执行，需要在ondragover上阻止默认事件
        oBox.ondrop = function () {
            console.log("已经在目的地上方松开鼠标了");
        }

        /*
            拖拽api的执行顺序
            dragstart(开始) drag(拖拽中)  dragenter(进入目的地) dragover(目的地上方) dragleave(离开目的地) dragend(拖拽结束)
            dragstart drag  dragenter dragover drop(在目的地上方结束) dragend
        */

    </script>
</body>

</html>